<template>
    <div class="case-num">
        <div class="container">
            <div class="title">
                <span>截止 {{ formatData(caseNumData.modifyTime) }} 全国数据统计 </span>
            </div>
        </div>
        <div class="num">
            <div class="num-item">
                <div class="create-count">
                    <b>
                        较昨日<em style="color: rgb(247, 76, 49)">{{ numZore(caseNumData.currentConfirmedIncr) }}</em>
                    </b>
                </div>
                <div class="count" style="color: rgb(247, 76, 49)">{{ caseNumData.currentConfirmedCount }}</div>
                <span>现存确诊</span>
            </div>
            <div class="num-item">
                <div class="create-count">
                    <b>
                        较昨日<em style="color: rgb(247, 130, 7)">{{ numZore(caseNumData.confirmedIncr) }}</em>
                    </b>
                </div>
                <div class="count" style="color: rgb(247, 130, 7)">{{ caseNumData.confirmedCount }}</div>
                <span>累计确诊</span>
            </div>
            <div class="num-item">
                <div class="create-count">
                    <b>
                        较昨日<em style="color: rgb(162, 90, 78)">+{{ caseNumData.suspectedIncr }}</em>
                    </b>
                </div>
                <div class="count" style="color: rgb(162, 90, 78)">{{ caseNumData.suspectedCount }}</div>
                <span>累计境外输入</span>
            </div>
            <div class="num-item">
                <div class="create-count">
                    <b>
                        较昨日<em style="color: rgb(174, 33, 44)">+{{ caseNumData.curedIncr }}</em>
                    </b>
                </div>
                <div class="count" style="color: rgb(174, 33, 44)">{{ caseNumData.curedCount }}</div>
                <span>累计治愈</span>
            </div>
            <div class="num-item">
                <div class="create-count">
                    <b>
                        较昨日<em style="color: rgb(93, 112, 146)">+{{ caseNumData.deadIncr }}</em>
                    </b>
                </div>
                <div class="count" style="color: rgb(93, 112, 146)">{{ caseNumData.deadCount }}</div>
                <span>累计死亡</span>
            </div>
            <div class="num-item">
                <div class="create-count">
                    <b>
                        较昨日<em style="color: rgb(40, 183, 163)">{{ numZore(caseNumData.seriousIncr) }}</em>
                    </b>
                </div>
                <div class="count" style="color: rgb(40, 183, 163)">{{ caseNumData.seriousCount }}</div>
                <span>现存无症状</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CaseNum',
    props: {
        caseNumData: {
            type: Object,
            default: function() {
                return {}
            }
        }
    },
    methods: {
        formatData(date) {
            var date = new Date(date);
            var YY = date.getFullYear() + "-";
            var MM =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            var DD =
                (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
                "   ";
            var hh =
                (date.getHours() < 10
                    ? "0" + date.getHours()
                    : date.getHours()) + ":";
            var mm =
                date.getMinutes() < 10
                    ? "0" + date.getMinutes()
                    : date.getMinutes();
            return YY + MM + DD + hh + mm;
        },
        numZore(num){
            return num > 0 ? "+"+num : "-" + num
        }
    }
}
</script>

<style scoped>
.title {
    font-size: 0.14rem;
    /* line-height: 0.20rem; */
    padding: 0.05rem;
}
.num {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
    justify-content: center;
    /* box-shadow: 0 0 0.05rem rgb(199, 194, 194); */
}
.num .num-item {
    width: 30%;
    background: rgb(197, 197, 199);
    /* margin-top: 0.05rem; */
    padding: 0.1rem 0;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}
em {
    font-size: 0.12rem;
}

.num-item span {
    font-size: 0.13rem;
}

.count {
    font-size: 0.18rem;
}
</style>